<template>
	<view class="content">
		<view class="head-title">
			<view class="title">{{title}}</view>
		</view>
		<view class="head-tips">最多{{label_length}}个，选择越多，内容越丰富</view>
		<view v-if="list.length" class="list">
			<view v-for="(item,index) in list" :key="index" class="item" :class="label_ids.includes(item.label_id) ? 'check-item' : ''" @click="checkItem(index)">{{item.label_name}}</view>
		</view>
		<view class="button_label" @click="submitLabel">选择标签 {{label_ids.length}}/{{label_length}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				label_ids: [],
			}
		},
		props: {
			title: {
				type: String,
				default: '目标客户行业'
			},
			list: {
				type: Array|Object,
				default: () => []
			},
			label_length: {
				type: Number,
				default: 3
			}
		},
		methods: {
			checkItem(index) {
				let that = this,
					data = this.list[index],
					label_ids = this.label_ids,
					label_length = this.label_length;
				if(!label_ids.includes(data.label_id)){
					if(label_ids.length >= parseInt(label_length)) return that.$util.Tips({title: '最多选择'+that.label_length+'个'+that.title+'标签'});
					
					label_ids.push(data.label_id)
				}else{
					label_ids.splice(label_ids.indexOf(data.label_id), 1);
				}
				that.$nextTick(()=>{
					that.label_ids = label_ids
				})
			},
			submitLabel() {
				let that = this;
				if(that.label_ids.length < 1) return that.$util.Tips({title: '请至少选择1个'+that.title+'标签'});
				that.$emit('submitLabel', that.label_ids);
			}
		}
	}
</script>
<style lang="scss" scoped>
	page,
	.content {
		width: 100%;
		height: 100%;
		background-size: 100% auto;
		padding: 80rpx 30rpx 60rpx;
		background-color: #fff;
	}
	.head-title {
		width: fit-content;
		position: relative;
		&:before {
			content: "";
			display: inline-block;
			width: 100%;
			height: 20rpx;
			background-color: #FFE103;
			position: absolute;
			bottom: 0rpx;
		}
		.title {
			position: relative;
			font-size: 48rpx;
			font-weight: 500;
			color: #323232;
			line-height: 66rpx;
		}
	}
	.head-tips{
		font-size: 28rpx;
		font-weight: 400;
		color: #767676;
		line-height: 40rpx;
		padding: 30rpx 0;
	}
	.list {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		text-align: center;
		height: 68vh;
		grid-gap: 40rpx;
		overflow-y: auto;
		.item{
			padding: 20rpx 0;
			margin: 5rpx 5rpx;
			background: #F9F9F9;
			border-radius: 37rpx;
			font-size: 32rpx;
			font-weight: 400;
			color: #1C211D;
			line-height: 44rpx;
		}
		.check-item {
			background: #FFE103;
		}
	}
	.button_label {
		display: table;
		width: 604rpx;
		height: 100rpx;
		padding: 30rpx 20rpx;
		// border: 1px solid #ccc;
		margin: 30rpx auto 0;
		background: #FFE103;
		border-radius: 50rpx;
		font-size: 34rpx;
		font-weight: 500;
		color: #1C211D;
		line-height: 48rpx;
		text-align: center;
	}
</style>
